<template>
    <view class="page-my" :style="'background-image: url('+ config.my_bc + ')'">
        <view class="back-btn" :style="'top:' + top + 'px; height:' + height + 'px'">
            <u-icon @click="back" name="arrow-left" size="50" color="#ffffff"></u-icon>
        </view>
        <image class="logo-img" src="../../static/images/logo.png" mode="widthFix"></image>
        <image class="dfq" src="../../static/images/dfq.png" mode="widthFix"></image>
        <view class="info-box" :style="'border-color:'+config.index_border_color">
            <view class="item-box" v-if="isLogin">
                <view class="head-box">
                    <u-avatar style="border: " :src="userInfo.headImg" :size="88"></u-avatar>
                </view>
                <view class="name-info">
                    <view class="name">
                        {{userInfo.realName}}
                    </view>
                    <view class="info-text">
                        <image v-if="step >= 10000" class="icon" :src="config.xiao_lian" mode="scaleToFill"></image>
                        <text class="text" v-if="step >= 10000 && step < 20000">已完成了今天10000的指标</text>
                        <text class="text" v-if="step >= 20000">已完成了今天20000的指标</text>
                    </view>
                </view>
                <view class="count-box">
                    <view class="text">
                        累计公益金
                    </view>
                    <view class="number-box"
                        :style="'color:'+config.circle_progress_color+';border-color:'+config.circle_progress_color">
                        {{money}}元
                    </view>
                </view>
            </view>
            <view class="item-box" v-else @click="toPage">
                <view class="head-box">
                    <u-avatar style="border: " :src="userInfo.headImg" :size="88"></u-avatar>
                </view>
                <view class="name-info">
                    <view class="name">
                        点击登录
                    </view>
                    <view class="info-text">
                        <image v-if="step >= 10000" class="icon" :src="config.xiao_lian" mode="scaleToFill"></image>
                        <text class="text" v-if="step >= 10000 && step < 20000">已完成了今天10000的指标</text>
                        <text class="text" v-if="step >= 20000">已完成了今天20000的指标</text>
                    </view>
                </view>
                <view class="count-box">
                    <view class="text">
                        累计公益金
                    </view>
                    <view class="number-box"
                        :style="'color:'+config.circle_progress_color+';border-color:'+config.circle_progress_color">
                        {{money}}元
                    </view>
                </view>
            </view>
            <view class="item-box">
                <view class="item">
                    <view class="title">
                        累计打卡
                    </view>
                    <view class="value">
                        <text class="big">{{dayNum}}</text>天
                    </view>
                </view>
                <view class="item">
                    <view class="title">
                        行动力超过
                    </view>
                    <view class="value">
                        <text class="big">{{rate}}</text>%的同事
                    </view>
                </view>
                <view class="item">
                    <view class="title">
                        今日步数
                    </view>
                    <view class="value">
                        <text class="big">{{step}}</text>步
                    </view>
                </view>
            </view>
        </view>
        <view class="qr-code-box" :style="'border-color:'+config.index_border_color">
            <view class="text-box">
                <view class="title">
                    我生平喜欢步行\n
                    运动给我带来了无穷的乐趣\n
                    <text style="display: inline-block;width: 90%;text-align: right;line-height: 34px;">—爱因斯坦</text>
                </view>
                <view class="btn-box" :style="'background-color: ' + config.index_border_color" @longpress="initCanvas">
                    长按生成专属海报
                </view>
            </view>
            <view class="code-box">
                <image class="code-img" :src="config.qr_code" mode="scaleToFill"></image>
            </view>
        </view>
        <view class="tips">
            <text class="rule" style="color: #ffffff; text-decoration: underline;" @click="showRule=true">活动规则</text>
        </view>
        <view class="canvas-box" style="width: 375px; height: 667px;">
            <canvas style="width: 100%; height: 100%;" canvas-id="myCanvas" id="myCanvas"></canvas>
        </view>
        <view class="rule-box" v-if="showRule" @click="showRule=false">
            <image class="rule-img" :src="config.gui_ze" mode="scaleToFill"></image>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                config: {
                    my_bc: '',
                    index_border_color: '',
                    xiao_lian: '',
                    ku_lian: '',
                    circle_progress_color: '',
                    canvas_bc: '',
                    qr_code: '',
                    gui_ze: ''
                },
                dayNum: 0,
                money: 0,
                rate: "0.0",
                step: 0,
                top: uni.getMenuButtonBoundingClientRect().top,
                height: uni.getMenuButtonBoundingClientRect().height,
                showRule: false,
                createStatus: false
            }
        },
        onShow() {
            this.initData()
        },
        methods: {
            async initData() {
                const reqData = {
                    uid: this.userInfo.uid,
                    cmId: this.userInfo.cmId
                }
                const [res, err] = await this.$get('xcx/findDayStepInfo', reqData);
                if (err) return
                this.dayNum = res.data.dayNum
                this.money = res.data.money
                this.rate = res.data.rate
                this.step = res.data.step
                // this.initCanvas()
            },
            getCanvasBcUrl() {
                const list = this.config.canvas_bc;
                const len = list.length;
                const ran = this.$u.random(0, len - 1);
                return list[ran]
            },
            async initCanvas() {
                if (!this.isLogin) {
                    uni.showLoading({
                        title: '请先登录',
                        mask: true
                    });
                    return
                }
                try {
                    const vm = this;
                    if (vm.createStatus) return
                    vm.createStatus = true;
                    const context = uni.createCanvasContext('myCanvas');
                    uni.showLoading({
                        title: '正在加载~',
                        mask: true
                    });
                    const canvasBcUrl = vm.getCanvasBcUrl()
                    const [err, bc] = await uni.downloadFile({
                        url: canvasBcUrl
                    });
                    const [err2, xiaolian] = await uni.downloadFile({
                        url: vm.config.xiao_lian
                    });
                    const [err3, headImg] = await uni.downloadFile({
                        url: vm.userInfo.headImg
                    });
                    if (err || err2 || err3) {
                        uni.showToast({
                            title: '生成海报失败，请检查网络连接',
                            icon: 'none'
                        })
                        return
                    }
                    const bcImgUrl = bc.tempFilePath;
                    const xiaolianUrl = xiaolian.tempFilePath;
                    const headImgUrl = headImg.tempFilePath;
                    this.brush(context, {
                        type: 'img',
                        url: bcImgUrl,
                        x: 0,
                        y: 0,
                        width: 375,
                        height: 667
                    });
                    this.brush(context, {
                        type: 'img',
                        url: headImgUrl,
                        x: 31,
                        y: 287,
                        width: 40,
                        height: 40,
                        circle: true
                    });
                    this.brush(context, {
                        type: 'text',
                        fontSize: 14,
                        color: '#333333',
                        bold: true,
                        x: 82,
                        y: 300,
                        text: vm.userInfo.realName
                    })
                    if (vm.step >= 10000) this.brush(context, {
                        type: 'img',
                        url: xiaolianUrl,
                        x: 82,
                        y: 308,
                        width: 15,
                        height: 15,
                        circle: true
                    });
                    if (vm.step >= 10000 && vm.step < 20000) this.brush(context, {
                        type: 'text',
                        fontSize: 12,
                        color: '#333333',
                        bold: false,
                        x: 102,
                        y: 320,
                        text: '已完成了今天10000的指标'
                    })
                    if (vm.step >= 20000) this.brush(context, {
                        type: 'text',
                        fontSize: 12,
                        color: '#333333',
                        bold: false,
                        x: 102,
                        y: 320,
                        text: '已完成了今天20000的指标'
                    })
                    this.brush(context, {
                        type: 'text',
                        fontSize: 18,
                        color: '#EE7869',
                        bold: false,
                        x: 305.4,
                        y: 328,
                        text: vm.money + '元',
                        align: 'center'
                    })
                    // this.brush(context, {type: 'text', fontSize: 12, color: '#EE7869', bold: false, x: 320, y: 328, text: '元', align: 'left'})
                    this.brush(context, {
                        type: 'text',
                        fontSize: 18,
                        color: '#333333',
                        bold: false,
                        x: 48,
                        y: 404,
                        text: vm.dayNum,
                        align: 'right'
                    })
                    this.brush(context, {
                        type: 'text',
                        fontSize: 12,
                        color: '#333333',
                        bold: false,
                        x: 50,
                        y: 404,
                        text: '天',
                        align: 'left'
                    })
                    this.brush(context, {
                        type: 'text',
                        fontSize: 18,
                        color: '#333333',
                        bold: false,
                        x: 166,
                        y: 404,
                        text: vm.rate,
                        align: 'right'
                    })
                    this.brush(context, {
                        type: 'text',
                        fontSize: 12,
                        color: '#333333',
                        bold: false,
                        x: 168,
                        y: 404,
                        text: '%的同事',
                        align: 'left'
                    })
                    this.brush(context, {
                        type: 'text',
                        fontSize: 18,
                        color: '#333333',
                        bold: false,
                        x: 310,
                        y: 404,
                        text: vm.step,
                        align: 'right'
                    })
                    this.brush(context, {
                        type: 'text',
                        fontSize: 12,
                        color: '#333333',
                        bold: false,
                        x: 312,
                        y: 404,
                        text: '步',
                        align: 'left'
                    })
                    context.draw(true, () => {
                        uni.canvasToTempFilePath({
                            x: 0,
                            y: 0,
                            canvasId: 'myCanvas',
                            success: function (res) {
                                // vm.numberImg = res.tempFilePath
                                uni.hideLoading()
                                uni.saveImageToPhotosAlbum({
                                    filePath: res.tempFilePath,
                                    success: function () {
                                        console.log('save success');
                                        uni.showToast({
                                            title: '您的专属海报已成功保存到系统相册',
                                            icon: 'none'
                                        })
                                        vm.createStatus = false
                                    },
                                    fail() {
                                        uni.showToast({
                                            title: '保存失败',
                                            icon: 'none'
                                        })
                                        vm.createStatus = false
                                    }
                                });
                            }
                        });
                    });
                } catch (e) {
                    //TODO handle the exception
                    console.log(e)
                    uni.showToast({
                        title: '生成海报失败，请稍后再试',
                        icon: 'none'
                    })
                }
            },
            getRpx(vw, w) {
                return vw / 750 * w
            },
            brush(ctx, config) {
                if (config.type === 'img') {
                    ctx.save()
                    if (config.circle) {
                        ctx.beginPath()
                        // 画一个圆形裁剪区域
                        ctx.arc(config.width / 2 + config.x, config.height / 2 + config.y, config.width / 2, 0, Math
                            .PI * 2, false)
                        // 裁剪
                        ctx.clip()
                    }
                    ctx.drawImage(config.url, config.x, config.y, config.width, config.height);
                    ctx.restore()
                }
                if (config.type === 'text') {
                    const fontSize = config.fontSize || 14;
                    const color = config.color || '#ffffff';
                    const x = config.x || 0;
                    const y = config.y || 0;
                    const align = config.align || 'left'
                    ctx.setFontSize(fontSize);
                    ctx.setFillStyle(color);
                    ctx.setTextAlign(align)
                    if (config.bold) {
                        ctx.fillText(config.text, x, y - 0.5);
                        ctx.fillText(config.text, x - 0.5, y);
                    }
                    ctx.fillText(config.text, x, y);
                    if (config.bold) {
                        ctx.fillText(config.text, x, y + 0.5);
                        ctx.fillText(config.text, x + 0.5, y);
                    }
                }
            },
            back() {
                uni.navigateBack({
                    delta: 1
                })
            },
            toPage() {
                uni.navigateTo({
                    url: '/pages/wxlogin/wxlogin'
                })
            }
        }
    }
</script>

<style lang="scss">
    .page-my {
        width: 100%;
        height: 100%;
        // background-image: url(http://127.0.0.1:5500/images/my_bc.png);
        background-size: cover;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center;
        position: fixed;
        top: 0;
        left: 0;

        .back-btn {
            position: fixed;
            left: 30rpx;
            z-index: 20;
            display: flex;
            align-items: center;
        }

        .logo-img {
            width: 278rpx;
            height: 92rpx;
            position: absolute;
            top: 50rpx;
            left: 160rpx;
            transform: translateX(-50%);
        }

        .dfq {
            width: 80%;
            position: absolute;
            top: 160rpx;
            left: 50%;
            transform: translateX(-50%);
        }

        .info-box {
            width: 690rpx;
            height: 320rpx;
            background: #FFFFFF;
            border: 4rpx solid #06B2FF;
            box-shadow: 0rpx 4rpx 8rpx rgba(248, 244, 127, 0.16);
            opacity: 1;
            border-radius: 20rpx;
            padding: 28rpx;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin: 540rpx auto 0 auto;

            .item-box {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .head-box {
                    width: 88rpx;
                    height: 88rpx;
                    border-radius: 50%;
                    overflow: hidden;
                }

                .name-info {
                    flex: 1;
                    margin-left: 18rpx;

                    .name {
                        font-size: 28rpx;
                        font-weight: bold;
                        color: #333333;
                    }

                    .info-text {
                        display: flex;
                        line-height: 48rpx;
                        align-items: center;
                        height: 48rpx;

                        .icon {
                            width: 30rpx;
                            height: 30rpx;
                        }

                        .text {
                            font-size: 24rpx;
                            color: #333333;
                            margin-left: 10rpx;
                        }
                    }
                }

                .count-box {
                    .text {
                        font-size: 20rpx;
                        line-height: 62rpx;
                        color: #333333;
                        text-align: center;
                    }

                    .number-box {
                        width: 138rpx;
                        height: 56rpx;
                        border: 2rpx solid #EE7869;
                        opacity: 1;
                        border-radius: 6rpx;
                        font-size: 28rpx;
                        line-height: 56rpx;
                        color: #EE7869;
                        text-align: center;
                    }
                }

                .item {
                    .title {
                        text-align: center;
                        font-size: 24rpx;
                        color: #ACA5A5;
                        line-height: 60rpx;
                    }

                    .value {
                        font-size: 24rpx;
                        color: #333333;

                        .big {
                            font-size: 44rpx;
                            margin-right: 4rpx;
                        }
                    }
                }
            }
        }

        .qr-code-box {
            width: 690rpx;
            height: 290rpx;
            background: #FFFFFF;
            border: 4rpx solid #06B2FF;
            box-shadow: 0rpx 4rpx 8rpx rgba(248, 244, 127, 0.16);
            margin: 46rpx auto 0 auto;
            border-radius: 20rpx;
            display: flex;
            justify-content: space-between;
            padding: 44rpx 52rpx;

            .text-box {
                height: 100%;
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .title {
                    font-size: 32rpx;
                    line-height: 22rpx;
                    color: #333333;
                    white-space: pre-line;
                }

                .btn-box {
                    width: 362rpx;
                    height: 52rpx;
                    font-size: 28rpx;
                    line-height: 52rpx;
                    color: #FFFFFF;
                    text-align: center;
                    border-radius: 50rpx;
                }
            }

            .code-box {
                width: 168rpx;
                height: 168rpx;
                background: #FFFFFF;
                border: 2rpx solid #707070;
                opacity: 1;
                display: flex;
                align-items: center;
                justify-content: center;

                .code-img {
                    width: 140rpx;
                    height: 140rpx;
                }
            }
        }

        .tips {
            width: 100%;
            text-align: center;
            font-size: 28rpx;
            color: #FFFFFF;
            position: absolute;
            bottom: 34rpx;
            left: 0;
        }

        .canvas-box {
            position: fixed;
            z-index: 1;
            top: 1000000rpx;
            left: 0rpx;
        }

        .rule-box {
            width: 100%;
            height: 100%;
            z-index: 200;
            position: fixed;
            left: 0;
            top: 0;
            background-color: rgba(0, 0, 0, .5);
            display: flex;
            align-items: center;
            justify-content: center;

            .rule-img {
                width: 600rpx;
                height: 690rpx;
                border-radius: 20rpx;
            }
        }
    }
</style>